<template>
  <article class="securityobj-tree">
    <n-input v-model:value="searchKey" @change="onChange" placeholder="请输入名称搜索"/>
    <n-tree :data="treeData" :node-props="nodeProps"
            :render-label="renderLabel"

            block-line
            cascade
            class="slash-tree"
            default-expand-all
            expand-on-dragenter
            key-field="id"
            label-field="securityObjName"
            selectable="true"
            style="max-height: 600px; min-height: 600px;overflow-y: scroll"


    />
  </article>
</template>

<script lang="ts">
import {defineComponent, h, onMounted, ref} from "vue";
import {NTooltip, TreeOption} from "naive-ui";
import httpApi from "@/views/AuthTbUser/UserBindDataSecurity/httpApi";


export default defineComponent(
    {
      components: {},
      emits: ["select"],
      setup(props, ctx) {
        const searchKey = ref<String>("")
        const onChange = (row: any) => {
          loadTreeList();
        }
        const renderLabel = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
          const {option} = info
          return h(NTooltip, {}, {
            default: option.securityObjName,
            trigger: h('div', {
              class: 'ellipsis-text'
            }, option.securityObjName)
          })
        }
        const renderPrefix = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
          const {option} = info;
          return h("i", {
            class: `${option.iconDefault} `,
            style: {
              color: `${option.enabled || (option.children) ? "" : "#0f93ff"}`,
              marginRight: "0px"
            }
          });
        };
        const renderSuffix = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
          const {option} = info;
          if (!(option.id)) {
            return h("i", {
              class: "ri-add-fill ",
              style: {
                marginRight: "5px",
                color: "#727070",
                fontSize: "20px"
              },
              onClick: (async (option: any) => {
                await doSaveModal(option);
                await reload();
              }).bind(null, option)
            });
          } else {
            const addBtn = h("i", {
                  class: "ri-add-fill ",
                  style: {
                    marginRight: "5px",
                    color: "#727070",
                    fontSize: "20px"
                  },
                  onClick: (async (option: any) => {
                    console.log("当前数据:", option);
                    await doSaveModal(option);
                    await reload();
                  }).bind(null, option)
                }
            );
            const editBtn = h("i", {
                  class: "ri-edit-line",
                  style: {
                    marginRight: "5px",
                    fontSize: "16px",
                    color: "#727070"

                  },
                  onClick: (async (option: any) => {
                    console.log("当前数据:", option);
                    await doUpdateModal(option);
                    await reload();
                  }).bind(null, option)
                }
            );
            const delBtn = h("i", {
              class: "ri-delete-bin-7-line ",
              style: {
                marginRight: "5px",
                fontSize: "16px",
                color: "#727070"
              },
              onClick: (async (option: any) => {
                await doDeleteModal(option);
                await reload();
              }).bind(null, option)
            });
            return h("span", option.nodeType === 'app' ? [addBtn] : [editBtn, delBtn]);
          }

        };
        const nodeProps = ({option}: { option: TreeOption }) => {
          return {
            onClick() {
              if (option.nodeType == 'obj') {
                ctx.emit("select", option);

              }
            }

          };
        };
        const onDrop = async (data: { node: TreeOption, dragNode: TreeOption, dropPosition: "before" | "inside" | "after", event: DragEvent }) => {
          console.log("拖动", data);
          const {node, dragNode, dropPosition} = data;
          const updateData = {
            id: dragNode.id,
            position: dropPosition,
            targetId: node.id

          };
          // await httpApi.doUpdateOrderIndex(updateData);
          await reload();
        };
        onMounted(() => {
          init();
        });
        const reload = async () => {
          await init();
        };
        const treeData = ref<any>([]);
        const init = async () => {
          await loadTreeList();
        };
        const loadTreeList = async () => {
          const msg = await httpApi.selectTreeList({
            searchKey: searchKey.value,
            filterEntity: 1
          } as any);
          treeData.value = [
            {
              id: 0,
              securityObjName: "全部权限对象资源",
              children: [...msg.data]
            }
          ];
          console.log(treeData.value);
        }
        return {
          searchKey,
          onChange,
          renderLabel,
          renderPrefix,
          renderSuffix,
          onDrop,
          treeData,
          nodeProps,
          defaultExpandedKeys: ref(["40", "41"])
        };
      }
    }
);


</script>

<style lang="less" scoped>
.securityobj-tree {
  height: 100%;
  overflow-y: auto;
}

.slash-tree {

  ::v-deep(.n-tree-node) {
    .n-tree-node-content__suffix {
      visibility: hidden;
    }

    &:hover {
      .n-tree-node-content__suffix {
        visibility: visible;
      }
    }
  }

}

:deep(.n-tree-node-content) {
  .n-tree-node-content__text {
    width: calc(100% - 90px);
  }

  .ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
}
</style>
